<template>
<f7-card class="card-good" @click.native="onCardClick">
  <f7-card-content :inner="false"><img :src="good.Gimg_path" :alt="good.Gname"></f7-card-content>
  <f7-card-footer>
    <f7-link href="/detail/" icon-f7="heart">&nbsp;{{good.Glike_vol}}</f7-link>
    <f7-link href="/detail/product.id" icon-f7="heart">&nbsp;{{good.Glike_vol}}</f7-link>
  </f7-card-footer>
</f7-card>
</template>

<script>
export default {
  name: 'list-card-good',
  props: ['good'],
  methods: {
    onCardClick() {
      const { Id } = this.good
      this.$router.loadPage(`/detail/${Id}/`)
    }
  }
}
</script>

<style lang="scss">
.card-good {
  margin: 0;

  img {
    max-width: 100%;
    vertical-align: middle;
  }
}
</style>
